<template>
  <div>
    <el-form :inline="true" size="mini">
      <el-form :inline="true" size="mini" @submit.native.prevent="GetList">
        <el-form-item label="活动标题">
          <el-input v-model="where['title']"/>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="where['audit_status']">
            <el-option :value="0" label="待审核"/>
            <el-option :value="1" label="审核通过"/>
            <el-option :value="2" label="审核拒绝"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">查询</el-button>
          <el-button @click="where={};GetList()">清除</el-button>
          <!-- <el-button type="primary" @click="$router.push('/activities/activity-forms-create')">新增活动报名</el-button> -->
        </el-form-item>
      </el-form>
      <el-table v-loading="loading" :data="list">
        <el-table-column prop="id" label="ID"/>
        <el-table-column prop="activity_name" label="活动名称"/>
        <el-table-column prop="name" label="姓名"/>
        <el-table-column label="性别">
          <template slot-scope="scope">{{ ['未知', '男', '女'][scope.row.sex] }}</template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号"/>
        <el-table-column prop="id_card" label="身份证"/>
        <el-table-column prop="add_uid" label="添加者编号"/>
        <el-table-column label="审核状态">
          <template slot-scope="scope">{{ ['待审核', '已通过', '已拒绝'][scope.row.audit_status] }}</template>
        </el-table-column>
        <!-- <el-table-column label="状态">
          <template slot-scope="scope">{{ ['禁用', '启用', '禁用'][scope.row.status] }}</template>
        </el-table-column> -->
        <el-table-column prop="created_at" label="创建时间"/>
        <el-table-column label="操作" width="220px">
          <template slot-scope="scope">
            <el-button slot="reference" size="mini" type="default" @click="$router.push({ path: '/activities/activity-forms-edit/' + scope.row.id, query: { page: listInfo.current_page } })">审核</el-button>
            <!-- <el-popover v-if="scope.row.status === 1" v-model="scope.row.showForbidden" placement="top" >
              <p>确定禁用？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="scope.row.showForbidden = false">取消</el-button>
                <el-button size="mini" type="primary" @click="Forbidden(scope.row)">确定</el-button>
              </div>
              <el-button slot="reference" size="mini" type="danger">禁用</el-button>
            </el-popover>
            <el-popover v-if="scope.row.status === 0" v-model="scope.row.showInvoke" placement="top">
              <p>确定启用？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="scope.row.showInvoke = false">取消</el-button>
                <el-button size="mini" type="primary" @click="Invoke(scope.row)">确定</el-button>
              </div>
              <el-button slot="reference" size="mini" type="success">启用</el-button>
            </el-popover> -->
            <el-popover v-model="scope.row.showDelete" placement="top">
              <p>确定删除？</p>
              <div style="text-align: right; margin: 0">
                <el-button size="mini" type="text" @click="scope.row.showDelete = false">取消</el-button>
                <el-button size="mini" type="primary" @click="Delete(scope.row)">确定</el-button>
              </div>
              <el-button slot="reference" size="mini" type="danger" icon="el-icon-delete"/>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="listInfo.current_page"
        :total="listInfo.total"
        :page-size="listInfo.per_page"
        layout="total, sizes, prev, pager, next, jumper"
        background
        @size-change="size => GetList(1, size)"
        @current-change="(page, size) => GetList(page)"
      />
  </el-form></div>
</template>

<script>
export default {
  data() {
    return {
      where: {},
      listInfo: {},
      list: [],
      loading: false
    }
  },
  mounted() {
    const page = this.$route.query.page || 1; // 默认到第一页
    this.GetList(page)
  },
  methods: {
    /**
     * 获取列表
     */
    GetList(page = 1, size) {
      this.loading = true
      size = size || this.listInfo.per_page || 10
      const params = { page, size, ...this.where }
      this.$http.get('activity_forms', { params }).then(response => {
        this.listInfo = response.meta
        this.list = response.resource
        this.loading = false
      })
    },
    /**
     * 删除
     */
    Delete(vo) {
      this.$http
        .delete('activity_forms/' + vo.id)
        .then(response => {
          this.GetList(this.listInfo.current_page, this.listInfo.per_page)
          this.$success('操作成功')
        })
        .catch(response => {
          this.$error(response)
        })
    },
    Forbidden(vo) {
      this.$http
        .put('activity_forms/' + vo.id + '/forbidden', { nowStatus: 2 })
        .then(response => {
          this.GetList(this.listInfo.current_page, this.listInfo.per_page)
          this.$success('操作成功')
        })
        .catch(response => {
          this.$error(response)
        })
    },
    Invoke(vo) {
      this.$http
        .put('activity_forms/' + vo.id + '/invoke', { nowStatus: 1 })
        .then(response => {
          this.GetList(this.listInfo.current_page, this.listInfo.per_page)
          this.$success('操作成功')
        })
        .catch(response => {
          this.$error(response)
        })
    }
  }
}
</script>

